<template>
    <div class="pageWrapper">
        <SearchBar @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="退款订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.refundId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="渠道退款订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.paymentId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="子订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.subOrderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="商户编码：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.merchantCode"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="商户名称：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.merchantName"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="业务场景：" :labelLg="8">
                <Select
                    v-model="dataModule.orderSource"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in businessChannerList"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="退款状态：" :labelLg="8">
                <Select
                    v-model="dataModule.refundStatus"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in refundState"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="退款申请时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="createDatePicker"
                    split-panels
                    transfer
                    placeholder="起始时间"
                    @on-change="createTime"
                ></DatePicker>
                <!-- <DatePicker type="date" split-panels placeholder="结束时间" v-model="dataModule.createTimeEnd" style="width:110px;margin-left:10px;"></DatePicker> -->
            </SearchBarItem>
            <SearchBarItem label="交易时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="dealDatePicker"
                    split-panels
                    transfer
                    placeholder="起始时间"
                    @on-change="dealTime"
                ></DatePicker>
                <!-- <DatePicker type="date" split-panels placeholder="结束时间" v-model="dataModule.refundTimeEnd" style="width:110px;margin-left:10px;"></DatePicker> -->
            </SearchBarItem>
        </SearchBar>
        <RemoteTable
            :namespace="namespace"
            :columns="columns"
            @onSortChange="onSortChange"
        >
            <!-- :isClearStoreQuery="isClearStoreQuery" -->
            <!-- <Button type="primary" icon="ios-search">查询</Button>
        <Button style="margin-left: 8px" icon="ios-undo" @click="resetForm">清空</Button> -->
        </RemoteTable>
    </div>
</template>

<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
} from "view-design";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../module/refundModule";
import Authc from "@/components/Authc";
import Action from "./Action";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from "@/utils/util";
// let isClearStoreQuery = false;

export default {
    name: "tables_page",
    components: {
        RemoteTable,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        RemoteSelect,
        Authc,
        Action,
        Button,
        Input,
        Modal,
        Message,
        Col,
        Row,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        Card
    },
    data() {
        return {
            requireUrl: "",
            namespace: namespace,
            // isClearStoreQuery, // 是否清除缓存
            isClear: true,
            loading: true,
            modal1: false,
            dataModule: {},
            businessChannerList: [], //业务渠道来源
            refundState: [], //退款状态
            columns: [
                {
                    type: "index",
                    title: "序号",
                    width: 80,
                    align: "center"
                    // fixed: "left"
                },
                {
                    title: "退款订单号",
                    key: "refundId",
                    align: "center",
                    minWidth: 180
                    // fixed: "left"
                },
                {
                    title: "退款支付订单号",
                    key: "payFlowId",
                    align: "center",
                    minWidth: 150,
                    // fixed: "left"
                },
                {
                    title: "渠道退款订单号",
                    key: "paymentId",
                    align: "center",
                    minWidth: 220
                },
                {
                    title: "子订单号",
                    key: "subOrderId",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "业务场景",
                    key: "orderSourceCN",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "商户编码",
                    key: "merchantCode",
                    align: "center",
                    minWidth: 220
                },
                {
                    title: "商户名称",
                    key: "merchantName",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "申请退款金额(元)",
                    key: "refundApplyAmount",
                    align: "center",
                    minWidth: 150,
                    render: (h, params) => {
                        let item = params.row.refundApplyAmount / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: "实际退款金额(元)",
                    key: "refundAmount",
                    align: "center",
                    minWidth: 150,
                    render: (h, params) => {
                        let item = params.row.refundAmount / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: "退款状态",
                    key: "refundStatus",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "退款申请时间",
                    key: "createdDt",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "交易时间",
                    key: "refundTime",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    // fixed: "right",
                    permissions: ["trade:order:refundOrde"],
                    minWidth: 90,
                    render: function(h, data) {
                        return h(Action, {
                            props: {
                                row: data.row
                            }
                        });
                    }
                }
                // {
                //   title: '操作',
                //   key: 'handle',
                //   width: 140,
                //   options: ['delete', 'check', 'edit'],
                //   buttons: [
                //     (h, params, vm) => {
                //       return this.dealBtnsOPeration(h, params, vm)
                //     }
                //   ]
                // }
            ],
            tableData: []
        };
    },
    created() {
        // this.isClearStoreQuery = isClearStoreQuery;
        // if (!this.isClearStoreQuery) {
        //     const dataModule = JSON.parse(JSON.stringify(this.$store.state[namespace].query || {}));
        //     this.dataModule = Object.assign({}, this.dataModule, dataModule);
        // }
        /** 重置请求参数, 解决搜索之后，请求参数没有清空的问题 **/
        this.$store.commit(`${namespace}/reviseQuery`);
        this.getSelect();
    },
    methods: {
        //查询数据字典
        getSelect() {
            this.$store.dispatch(`${namespace}/getSearchKey`).then(res => {
                if (res.data.errorCode === 0) {
                    let data = res.data.data;
                    this.businessChannerList = data.orderSource; // 业务来源
                    this.refundState = data.refundStatus; //订单状态
                }
            });
        },
        handleSearch() {
            let pageSize = {
                currentPage: 1,
                pageSize: 10
            };
            this.$store.dispatch(`${namespace}/query`, {
                ...this.dataModule,
                ...pageSize
            });
        },
        onSortChange(sort) {
            if (sort.order === "normal") {
                this.queryParam.order = [];
            } else {
                this.queryParam.order = [sort.key + " " + sort.order];
            }
            this.handleSearch();
        },
        resetForm() {
            /** data 里面没有显示声明的，就得用 this.$set 动态修改对应的值 **/
            this.$set(this.dataModule, "refundId", "");
            this.$set(this.dataModule, "paymentId", "");
            this.$set(this.dataModule, "subOrderId", "");
            this.$set(this.dataModule, "merchantCode", "");
            this.$set(this.dataModule, "merchantName", "");
            this.$set(this.dataModule, "orderSource", "");
            this.$set(this.dataModule, "refundStatus", "");
            // 清空时间选择
            this.$refs["createDatePicker"].handleClear();
            this.$refs["dealDatePicker"].handleClear();
        },
        // 退款申请时间
        createTime(date, type) {
            this.dataModule.createTimeBegin = date ? date[0] : "";
            this.dataModule.createTimeEnd = date ? date[1] : "";
        },
        // 交易时间
        dealTime(date, type) {
            this.dataModule.refundTimeBegin = date ? date[0] : "";
            this.dataModule.refundTimeEnd = date ? date[1] : "";
        }
    },
    mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    },
    // beforeRouteEnter (to, from, next) {
    //     // ...
    //     isClearStoreQuery = from.fullPath.indexOf('refundOrderDetailForm') === -1;
    //     console.log(from.fullPath.indexOf('refundOrderDetailForm') === -1)
    //     next();
    // }
};
</script>

<style lang="less" scoped>
.pageWrapper {
    /deep/ .ivu-date-picker .ivu-picker-panel-body {
        display: block !important;
    }
}
</style>
